<template>
  <div class="upcoming_events">
    <div class="top">
      <div>近期活动</div>
      <div @click="toAllActivities">查看全部</div>
    </div>
    <div v-for="(item,index) in eventsList" :key="index" class="bottom">
      <div :class="`left_img left_img${index}`"/>
      <div class="right_text">
        <div class="text">{{ item.text }}</div>
        <div class="date">{{ item.date }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UpcomingEvents",
  data() {
    return {
      eventsList: [
        {
          text: '团队季度会议',
          date: '2025年03月03日 14：00'
        },
        {
          text: '项目季度会议',
          date: '2025年03月03日 14：00'
        },
        {
          text: '新员工培训',
          date: '2025年03月03日 14：00'
        },
      ],
    }
  },
  methods: {
    toAllActivities() {
      this.$router.push({name: 'AllActivities'})
    }
  }
}
</script>

<style lang="scss" scoped>
.upcoming_events {
  margin-top: 2vh;
  display: flex;
  flex-direction: column;
  padding: 2vh;

  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2vh;

    div:nth-child(1) {
      font-size: 2vh;
    }

    div:nth-child(2) {
      color: #65b4ff99;
      cursor: pointer;
    }
  }

  .bottom {
    height: 8vh;
    background: #F9FAFB;
    display: flex;
    align-items: center;
    padding-left: 1.5vh;
    border-radius: 8px;
    margin-bottom: 2vh;

    .left_img {
      width: 6vh;
      height: 6vh;
      background-image: url("@/assets/jqhd/tdjdhy.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .left_img1 {
      background-image: url("@/assets/jqhd/xmjdhb.png");
    }

    .left_img2 {
      background-image: url("@/assets/jqhd/xygpx.png");
    }

    .right_text {
      margin-left: 2vh;

      .text {
        font-size: 1.5vh;
        margin-bottom: 0.5vh;
      }

      .date {
        font-size: 1.2vh;
        color: #939393;
      }
    }
  }
}
</style>
